<template>
    <Row>
      <Col span="20">
        <FormItem style="margin-bottom: 0.5em">
          <template v-if="onlyAdd">
            <Button type="info" v-if="havePermission('add')&&showAdd" style="margin-right: 5px" @click="handleEvent('add')"><Icon type="md-add" />新增</Button>
          </template>
          <template v-else>
            <Button type="info" v-if="havePermission('add')" style="margin-right: 5px" @click="handleEvent('add')"><Icon type="md-add" />新增</Button>
          </template>
          <Button type="success" v-if="!onlyAdd && havePermission('view')" style="margin-right: 5px" @click="handleEvent('view')"><Icon type="ios-eye" />查看</Button>
          <Button type="warning" v-if="!onlyAdd && havePermission('edit')" style="margin-right: 5px" @click="handleEvent('edit')"><Icon type="md-create" />修改</Button>
          <Button type="error" v-if="!onlyAdd && havePermission('delete')" @click="handleEvent('delete')"><Icon type="ios-trash" />删除</Button>
          <slot></slot>
        </FormItem>
      </Col>
      <Col class="4" v-if="fullscreenAble">
        <div>
          <Tooltip content="密度" placement="top" style="margin-right: 5px" v-if="tableSize">
            <Dropdown trigger="click" @on-click="setTableSize">
              <Icon type="md-list" size="20" />
              <DropdownMenu slot="list">
                <DropdownItem name="default" :selected="size==='default'" >默认</DropdownItem>
                <DropdownItem name="large" :selected="size==='large'" >宽松</DropdownItem>
                <DropdownItem name="small" :selected="size==='small'" >紧凑</DropdownItem>
              </DropdownMenu>
            </Dropdown>
          </Tooltip>
          <Tooltip :content="isFullscreen?'退出全屏':'全屏'" placement="top" style="margin-right: 5px">
            <Icon custom="i-icon" :class="fullscreenIcon"  @click="fullscreen" size="20"/>
          </Tooltip>

        </div>
      </Col>
    </Row>
</template>

<script>
import PermissionService from '@/service/PermissionService'
import screenFull from 'screenfull'
export default {
  name: "permission-button",
  model: {
    prop: 'tableSize',
    event: 'change'
  },
  props:{
    permissionCodePrefix:{
      type: String,
      required: true
    },
    tableSize:{
      type: String,
      required: false
    },
    fullscreenAble:{
      type: Boolean,
      required: false,
      default: false
    },
    onlyAdd:{
      type: Boolean,
      required: false,
      default: false
    },
    showAdd:{
      type: Boolean,
      required: false,
      default: false
    }
  },
  data(){
    return{
      isFullscreen: false,
      size: this.tableSize,
      buttonPermissions:[]
    }
  },
  mounted(){
    PermissionService.getButtonPermissions().then(res=> this.buttonPermissions = res);
  },
  computed:{
    fullscreenIcon() {
      return [this.isFullscreen ? 'i-icon-exit-full-screen' : 'i-icon-full-screen']
    },
  },
  methods: {
    handleEvent(event){
      this.$emit('handleEvent',this.permissionCodePrefix+event)
    },
    havePermission(code) {
      let permissionCode = this.permissionCodePrefix + code
      return this.buttonPermissions.includes(permissionCode);
    },
    fullscreen() {
      this.isFullscreen = !this.isFullscreen;
      let div = document.getElementsByClassName("main_content");
      screenFull.toggle(div[0])
    },
    setTableSize(val){
      this.size = val
      this.$emit('change', val)
    }
}
}
</script>

<style scoped>
.ivu-fr {
  float: right;
}
.ivu-inline-block {
  display: inline-block;
}
</style>